<template>
  <view class="take">
    <view class="hd">
      <view class="left" v-if="detail.user" @click="goUser(detail.user)">
        <view class="avatar">
          <image :src="setUrl(detail.user.avatar)" class="img"></image>
          <image src="../../static/vip.png" class="vip"></image>
        </view>
        <view class="fo">
          <view class="name">{{ detail.user.nickname }}<!-- <text class="side">财经博主</text> --></view>
          <view class="time">{{ timeFormat(detail.createtime, 'yyyy-mm-dd hh:MM') }} | 阅读人数：{{ detail.views }}</view>
        </view>
      </view>
      <view class="right">
        <template v-if="detail.is_my != 1 && platform != 'h5'">
          <view @click="followUser">
            <view class="setMarrow fish" v-if="detail.is_follow">已关注</view>
            <view class="setMarrow " v-else>关注</view>
          </view>
        </template>
      </view>
    </view>
    <view class="topic" v-if="detail.tag && detail.tag.length">
      <view class="test" v-for="(item, idx) in detail.tag" :key="idx">#{{ item.name }}</view>
    </view>
    <view class="title">{{ detail.title }}</view>
    <view class="content" :class="{ line3: isBuy }" @click="goDetail">{{ detail.content }}</view>
    <view class="file" v-if="detail.type == 2" @click="downFile">
      <view class="icon">
        <image src="../../static/fileImage.png" class="img"></image>
      </view>
      <view class="name">{{ suffixFile(detail.files) }}</view>
    </view>
    <view class="picture" v-if="detail.type == 1 && detail.images">
      <template v-for="(item, idx) in detail.images.split(',')" :key="idx">
        <template v-if="isBuy">
          <view class="environ" v-if="idx < 3" @click="previewImage(detail.images.split(','), item)">
            <image :src="setUrl(item)" class="img" mode="center"></image>
          </view>
        </template>
        <template v-else>
          <view class="environ" @click="previewImage(detail.images.split(','), item)">
            <image :src="setUrl(item)" class="img" mode="center"></image>
          </view>
        </template>
      </template>
    </view>
    <view class="zhan" v-if="detail.release_type == 2">{{ desc[detail.copyright] }}</view>
    <view class="lock" v-if="isBuy">
      <uv-icon name="lock" color='#333333' size='32rpx'></uv-icon>部分内容已隐藏，付费查看更多内容
    </view>
  </view>
</template>

<script setup>
import logoImage from '@/static/logo.png';
import { ref, computed } from 'vue';
import { suffixFile, setUrl } from '@/common';
import { timeFormat } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
import { post } from '@/api';
import { useOrder } from '@/store';

const emit = defineEmits(['followClick']);
const onShare = ref(null);
const platform = uni.$uv.platform;
const desc = ref({
  1: '转载，不作为证券推荐或投资建议，意在分享信息，作者不保证内容准确性。',
  2: '原创，不作为证券推荐或投资建议，制止发文时，作者不持有相关标的。',
  3: '原创，不作为证券推荐或投资建议，制止发文时，作者持有相关标的，下一个交易日内可能随机卖出。',
  4: '原创，不作为证券推荐或投资建议，制止发文时，作者持有相关标的，下一个交易日内没有卖出计划。'
})

const body = computed(() => {
  const store = useOrder();
  let group = store.group;
  return group.member_info;
});
const isBuy = computed(() => { // 收费且未购买
  return props.detail.is_charge == 2 && props.detail.is_buy == 0;
})
  
const props = defineProps({
  detail: {
    type: Object,
    default: () => {}
  },
  isClick: {
    type: Boolean,
    default: true
  },
})
// 关注
function followUser(){
  const params = {
    follow_user_id: props.detail.user.id,
    way: props.detail.is_follow == 1 ? 2 : 1
  }
  post('api/user_follow/followUser', params).then(res => {
    if(res.code == 1){
      emit('followClick', {type: 'is_follow', userId: props.detail.user.id});
    }
  })
}
// 放大图片
function previewImage(arr, row){
  if(isBuy.value) return;
  // #ifdef WEB
  toast('请前往APP查看');
  return;
  // #endif
  let list = arr.map(e => setUrl(e));
  uni.previewImage({
    urls: list,
    current: setUrl(row),
  });
}
function nowShare(){
  onShare.value.open();
}
function downFile(){
  if(isBuy.value) return;
  console.log(setUrl(props.detail.files));
  uni.downloadFile({
    url: setUrl(props.detail.files),
    success: function (res) {
      var filePath = res.tempFilePath;
      uni.openDocument({
        filePath: filePath,
        success: function (res) {
          console.log('打开文档成功');
        }
      });
    }
  });

}
function goDetail(){
  if(!props.isClick) return;
  uni.navigateTo({
    url: `/pages/dynamic/detail?id=${props.detail.id}`
  });
}
function goUser(row){
  if(!props.isClick) return;
  uni.navigateTo({
    url: `/pages/mine/official/index?id=${row.id}`
  });
}
</script>

<style lang="scss" scoped>
  .take{
    padding-top: 40rpx;
    padding-bottom: 30rpx;
    border-top: 1px solid #EFEFEF;
    &:first-child{
      border-top: 0;
    }
    .foot{
      width: 100%;
      display: flex;
      align-items: center;
      .item{
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        .number{
          font-weight: 400;
          font-size: 24rpx;
          color: #737373;
          padding-left: 8rpx;
        }
        .icon{
          width: 32rpx;
          height: 32rpx;
        }
      }
    }
    .file{
      width: 100%;
      height: 100rpx;
      background: #F5F5F5;
      border-radius: 8rpx;
      margin-bottom: 36rpx;
      display: flex;
      align-items: center;
      .name{
        font-weight: 400;
        font-size: 28rpx;
        color: #737373;
        padding: 0 20rpx;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
      .icon{
        width: 100rpx;
        height: 100rpx;
        background-color: #E55D52;
        display: flex;
        align-items: center;
        justify-content: center;
        .img{
          width: 60rpx;
          height: 60rpx;
        }
      }
    }
    .group{
      padding-bottom: 36rpx;
      display: inline-block;
      .base{
        display: flex;
        align-items: center;
        background-color: #F0F3FA;
        padding: 12rpx;
        border-radius: 8rpx;
        .tit{
          height: 40rpx;
          border-radius: 40rpx;
          line-height: 40rpx;
          padding: 0 10rpx;
          font-size: 24rpx;
          color: #2B2B2B;
          background-color: rgba($color: #999999, $alpha: .5);
        }
        .icon{
          width: 40rpx;
          height: 40rpx;
          border-radius: 6rpx;
          font-size: 0;
          overflow: hidden;
        }
        .name{
          font-weight: 400;
          font-size: 24rpx;
          color: #465B89;
          padding-left: 8rpx;
        }
      }
    }
    .zhan{
      font-weight: 400;
      font-size: 24rpx;
      color: #999999;
    }
    .lock{
      font-weight: 400;
      font-size: 28rpx;
      color: #737373;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #F5F5F5;
      border-radius: 10rpx;
      padding: 20rpx 0;
      margin: 40rpx 0;
    }
    .picture{
      width: 100%;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      padding-bottom: 36rpx;
      .environ{
        width: 32%;
        height: 200rpx;
        margin-right: 1%;
        margin-bottom: 1%;
        border-radius: 12rpx;
        overflow: hidden;
      }
      .environ:nth-child(1):nth-last-child(2),
      .environ:nth-child(2):nth-last-child(1),
      .environ:nth-child(1):nth-last-child(3),
      .environ:nth-child(2):nth-last-child(2),
      .environ:nth-child(3):nth-last-child(1) {
          width: 32%;
      }
      
      .environ:nth-child(1):nth-last-child(4),
      .environ:nth-child(2):nth-last-child(3),
      .environ:nth-child(3):nth-last-child(2),
      .environ:nth-child(4):nth-last-child(1) {
          width: 49%;
          height: 300rpx;
      }
    }
    .title{
      padding-bottom: 20rpx;
      font-size: 32rpx;
      font-weight: bold;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    .content{
      font-weight: 400;
      font-size: 30rpx;
      color: #2B2B2B;
      margin-bottom: 24rpx;
      white-space: pre-line;
      &.line3{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
      }
    }
    .topic{
      width: 100%;
      padding-bottom: 8rpx;
      display: flex;
      flex-wrap: wrap;
      .test{
        font-weight: 400;
        font-size: 30rpx;
        color: #465B89;
        margin-right: 20rpx;
      }
    }
    .hd{
      width: 100%;
      padding-bottom: 26rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left{
        display: flex;
        align-items: center;
        .fo{
          padding-left: 20rpx;
          .desc{
            font-weight: 400;
            font-size: 22rpx;
            color: #999999;
          }
          .time{
            font-weight: 400;
            font-size: 22rpx;
            color: #999999;
          }
          .name{
            font-weight: 500;
            font-size: 32rpx;
            color: #2B2B2B;
            display: flex;
            align-items: center;
            .side{
              font-weight: 400;
              font-size: 20rpx;
              color: #999999;
              height: 32rpx;
              line-height: 32rpx;
              padding: 0 12rpx;
              border-radius: 32rpx;
              border: 1rpx solid #B8B8B8;
              margin-left: 8rpx;
            }
          }
        }
        .avatar{
          width: 70rpx;
          height: 70rpx;
          position: relative;
          .img{
            border-radius: 50%;
            overflow: hidden;
          }
          .vip{
            position: absolute;
            right: 0;
            bottom: 0;
            width: 28rpx;
            height: 28rpx;
          }
        }
      }
      .right{
        display: flex;
        align-items: center;
        .setMarrow{
          width: 124rpx;
          height: 44rpx;
          background: #FFFFFF;
          border: 1rpx solid #E43222;
          border-radius: 44rpx;
          line-height: 44rpx;
          text-align: center;
          font-weight: 400;
          font-size: 24rpx;
          color: #E43222;
          box-sizing: content-box;
          &.fish{
            color: #999999;
            border-color: #999999;
          }
        }
      }
    }
  }
</style>